<!-- 分支选择盒子 （由分支选择组组成）-->  
<template>
    <!-- 最外层框 -->
    <div  class="flow-serial-box" :style="{'margin-top': readonly? '0': '10px'}">
        <ParallelGroup :nodeData="nodeData"  :readonly="readonly"></ParallelGroup>
        <div class="flow-serial-box-footer">
            <Line :nodeId="nodeData.nodeId" :readonly="readonly"></Line>
        </div>
    </div>
</template>

<script setup>
    import { defineProps, toRefs } from 'vue';
    import Line from '../line.vue'
    import ParallelGroup from './parallelGroup.vue'
    const props = defineProps({
        nodeData:{
            
        },
        readonly: {
            type: Boolean,
            default: false
        },
    })

    const {readonly} = toRefs(props);
    console.log(readonly.value)
</script>

<style  scoped>
    .flow-serial-box{
        width: 100%;
        /* margin-top: 10px; */
        display: flex;
        flex-direction: column;
        min-width: 0;
        /* align-content: center; */
        /* flex-wrap: nowrap; */
        /* align-items: center; */
        position: relative;
    }
    .flow-serial-box-wrap{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
    }
    .flow-serial-box-footer{
        display: flex;
        width: 100%;
        flex-wrap: nowrap;
        justify-content: center;
        background-color: var(--global-flow-background-color);

    }
</style>